<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>web chat</title>
<style type="text/css">
*{margin: 0;padding: 0;}
html,body,#page{width: 100%;height: 100%;}
#page{position: relative;}
#page header{width: 100%;height: 45px;color: white;font-size: 15px;position: relative;text-align: center;background: #40a2fe;line-height: 45px;}
#page header .logo{position: absolute;width: 33px;height: 33px;border-radius: 50%;left: 10px;top: 6px;}
#page header .logo img{width: 100%;height: 100%;display: block;border-radius: 50%;}
#page .msg-box{position: absolute;top: 45px;left: 0;right: 0;bottom: 38px;overflow: auto;}
#page .msg-box ul{}
#page .msg-box ul li{font-size: 14px;list-style: none;overflow: auto;}
#page .msg-box ul .all-list{}
#page .msg-box ul .all-list img{width: 45px;height: 45px;border-radius: 50%;display: block;margin: 8px;float: left;}
#page .msg-box ul .all-list p{max-width: 239px;padding: 12px;float: left;background: #a2d6f3;color: #000;border: 1px solid #91c9e9;border-radius: 5px;box-shadow: 2px 2px #369bdb;margin-top: 15px;word-wrap:break-word; word-break:normal;}
/*#page .msg-box ul .all-list:after{content: "";clear: both;visibility: hidden;height: 0;}*/
#page .msg-box ul .muchlist{padding: 10px;text-align: center;}
#page .msg-box ul li a{padding: 5px 10px;background: #e2e2e2;text-decoration: none;font-size: 12px;border-radius: 5px;color: #666;}
#page .msg-box ul li a:hover{text-decoration: none;}
#page .msg-box ul .right p{box-shadow: -2px 2px #369bdb;float: right;}
#page .msg-box ul .right img{float: right;}
#page .send-box{position: absolute;left: 0;width: 100%;bottom: 0;background: #CECECE;height: 38px;text-align: center;}
#page .send-box input{width: 298px;height: 30px;font-size: 12px;border: 1px solid #fff;border-radius: 5px;margin-top: 3px;}
#page .send-box button{height: 30px;padding: 0 10px;border:1px solid #cecece;color: white;}
/*.right{text-align: right;}
li{list-style: none;}
ul{width: 80%;margin: 0 auto;border: 1px solid #cecece;}
.muchlist{color: lightblue;text-align: center;font-size: 12px;margin-bottom: 10px;padding: 6px;}*/
</style>
</head>
<body>
<div id="page">
	<header>
		<div class="logo">
			<img src="__PUBLIC__/images/pic.jpg"/>
		</div>
		接收者<select id="uid">
			<for start="1" end="20">
			<option value="{$i}">{$i} 号</option>
			</for>
		</select>
	</header>
	<div class="msg-box">
		<ul id="charBox" style="height: 100%; overflow-x:auto;">
			<li class="muchlist" id="more_data_btn">
				<a href="javascript:void(0)" onclick="more_data()">查看更多历史消息</a>
			</li>
			<li v-for="item in items" :class="{right:item.right}" class="all-list">
				<img :src="item.imgsrc" alt="" />
				<p>{{item.text}}</p>
			</li>
		</ul>			
		
	</div>
	<div class="send-box">
		<input type="hidden" name="uid" id="uid2" value="1">
		<input type="text" name="msg" id="msg" value=""/>
		<button id="send">发送</button>
	</div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>


<script>
var scroll_bottom = true; // 全局变量，是否滚动到底部
var data_length = 0; // 全局变量，vue里面获取新加入的历史数据的长度
$(function() {
	$("#send").click(function() {
	    send_msg();
	});
	$('#msg').keyup(function(event) {
		if(event.keyCode===13){
			send_msg();
		}
	});
});
function send_msg(){
	var uid = $('#uid').val();
    var msg = $('#msg').val();
    $.post("{:U('Index/message')}", {
        uid: uid,
        msg: msg
    },
    function(data) {
        $('#msg').val('');
    });
}
function more_data(){
	var uid = $('#uid').val();
    $.post("{:U('Index/more_msg')}", {
        uid: uid
    },
    function(data) {
    	if(data == 'null'){
    		$('#more_data_btn').hide();
    		alert('没有更多消息了');
    		return false;
    	}
		scroll_bottom = false;
    	var dataxx = JSON.parse(data)
    	data_length = dataxx.length;
    	for (var i = 0; i < data_length; i++) {
    		dataIm.unshift(dataxx[i]);
    	}
    });
}
</script>  


<script type="text/javascript">
var dataIm = {$arr['json']};
var vm = new Vue({
	el:"#page",
	data:{
		items:dataIm
	},
	computed:{
        msgbox(){
            return document.getElementById("charBox")
        }
    },
    updated:function(){
    	console.log(scroll_bottom);
         if(scroll_bottom == true){
         	this.msgbox.scrollTop=this.msgbox.scrollHeight
         }else{
         	scroll_bottom = true;
         	var li = document.getElementById('charBox').getElementsByTagName('li');
			var liheight = 0;
			for(var i=0;i<data_length;i++){
				liheight +=	li[i].offsetHeight;
			}
			console.log(liheight);
			document.getElementById("charBox").scrollTop = liheight;
         }
    }
})

</script>
<script type="text/javascript"> 
function insert_data(received_msg){
	// console.log('插入消息：'+received_msg);
	dataIm.push(received_msg);
	// console.log(dataIm+'-dataIm');
}

// 打开一个 web socket 
var ws = new WebSocket("ws://{$Think.config.WEBSITE}:8282");
ws.onopen = function() {};
ws.onmessage = function(evt) {
    var received_msg = evt.data;
    console.log(received_msg);
    var jmsg = JSON.parse(received_msg);
    if (jmsg.text) {
        insert_data(jmsg);
    }
    if (jmsg.client_id) {
        $.post("{:U('Index/bind')}", {
            client_id: jmsg.client_id
        },
        function(data) {
        	console.log(data);
        });
    }
} 
</script> 
</body>
</html>
